<template>
  <!-- 只读 -->

  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工资：{{ job.j1.salary }}</h2>
  <h2>当前求和{{ sum }}</h2>
  <h2> 车信息：{{ person.car }}</h2>
  <button @click="sum++">+1</button>
  <button @click="name += '~'">改姓名</button>
  <button @click="age++">改年龄</button>
  <button @click="job.j1.salary++">涨工资</button>
  <button @click="showRawPerson">输入最原始的persion</button>
<button @click="addCar">给人添加一台车</button>
<button @click="person.car.price++">修改车价格</button>
</template>
  
  <script>
import { toRefs, reactive, ref, toRaw, markRaw } from "vue";
export default {
  name: "App",
  components: {},

  setup(props, context) {
    let sum = ref(0);
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    function showRawPerson() {
      // toRaw只能转换 reactive 的响应式数据 
      // 变成 普通对象。
      // console.log(person);
      let p = toRaw(person);
      // p.age++
      console.log(p);
    }
    function addCar() {
      let car={name:'奔驰',price:40}
      person.car=car//直接加是响应式的。
      // 不想是响应式的    数据变了只是 vue监听不到  并且不会给car 添加响应式 get set
      person.car =markRaw(car)
    }

    return { addCar,person,...toRefs(person), sum, showRawPerson };
  },
};
</script>
  
  <style>
</style>
  